<template>
	<view class="action-panel" :class="{ 'panel-show': isShow, 'panel-hide': !isShow }">
		<!-- 左侧关闭图标 -->
		<view class="icon-left" @click.stop="handleClose">
			<uni-icons type="closeempty" size="24" color="#666"></uni-icons>
		</view>

		<!-- 中间功能图标组 -->
		<view class="middle-icons">
			<view class="sound" @click.stop="setSound">
				<image class="sound-img" :src="soundState" mode="aspectFill"></image>
			</view>
			<view class="" @click.stop="editName">
				<uni-icons type="compose" size="24" color="#666"></uni-icons>
			</view>
			<image class="topimg" :src="getIsTop(chatItem) ? '/static/noTop.png' : '/static/top.png'" mode="aspectFill" @click="handleTop"></image>
			<uni-icons type="trash" size="24" color="#666" @click="delItem"></uni-icons>
		</view>

		<input-dialog :isShow.sync="showDialog" :placeholder="placeholder" :maxlength="20" :title="title" @confirm="confirm"></input-dialog>
	</view>
</template>

<script>
import { getSurroundingGrids } from '../utils/getSurroundingGrids';
import * as msgAction from '@/utils/msgAction.js';
import popMenu from './popMenu.vue';
import soundManger from '../utils/soundManger';
import Favorite from '../utils/favoriteClass';
import InputDialog from './InputDialog.vue';
const friend = uniCloud.importObject('friend', { customUI: true });

export default {
	name: 'topTool',
	components: {
		InputDialog,
		popMenu
	},
	props: {
		isShow: {
			type: Boolean,
			default: false
		},
		chatItem: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			favoriteManger: null,
			title: '',
			placeholder: '',
			currentName: '',
			soundmanger: null,
			showDialog: false,
			sound: 0,
			isMore: false,
			soundMap: {
				0: '/static/sound.png',
				1: '/static/vibration.png',
				2: '/static/nosound.png'
			},
			menuList: [
				{ label: '地图搜索', value: 'toMap' },
				{ label: '地名输入', value: 'keyWord' }
			]
		};
	},

	computed: {
		soundState() {
			// 非收藏类型直接返回默认图标
			console.log(this.chatItem);
			let id = '';
			if (this.chatItem?.type === 'favorite') {
				id = this.chatItem.data?.favorite_id;
			} else if (this.chatItem?.type === 'group') {
				id = this.chatItem.data?.groupId;
			} else if (this.chatItem?.type === 'person') {
				id = this.chatItem.data?.friendUserId;
			}
			console.log('id.....', id);
			const sound = new soundManger();

			const state = sound.getState(id);
			console.log('状态', state);
			if (state === 2) {
				return '/static/sound.png';
			} else if (state === 0) {
				return '/static/nosound.png';
			} else if (state === 1) {
				return '/static/vibration.png';
			} else {
				return '/static/sound.png';
			}
		}
	},

	watch: {
		soundState: {
			handler(newval) {
				console.log(newval);
			},
			immediate: true,
			deep: true
		}
	},

	mounted() {},
	methods: {
		getIsTop(item) {
			if (!item) return false;
			return item.data?.isTop || false;
		},
		handleClose() {
			this.$emit('close');
		},
		handleMore() {
			this.isMore = true;
			this.$emit('more-click');
		},
		async confirm(name) {
			try {
				if (this.chatItem.type === 'favorite') {
					const location = this.$store.state.msg.location;
					const storeData = this.$store.state.msg;
					const favoriteManger = new Favorite(location, storeData);
					const res = await favoriteManger.rename(this.chatItem.favorite_id, name);
					if (res.code) {
						uni.$emit('reload');
						uni.showToast({
							title: res.errMsg
						});
					} else {
						uni.showToast({
							title: res.errMsg + '，请稍稍侯再试！',
							position: 'center'
						});
					}
				}
				if ((this.chatItem.type = 'person')) {
					const userId = this.$store.state.msg.user.userId;
					const friendUserId = this.chatItem.data.friendUserId;
					const remarkName = name;
					const res = await friend.editFriendRemarkName({ userId, friendUserId, remarkName });
					if (res.success) {
						uni.$emit('reload');
					} else {
						uni.showToast({
							title: res.message,
							position: 'center'
						});
					}
				}
			} catch (e) {
				console.error(e);
			}
		},

		menuClick(e) {
			console.log(e);
			switch (e.item.value) {
				case 'toMap':
					{
						uni.navigateTo({
							url: '/pages/main/main'
						});
					}
					break;
				default:
					uni.showToast({
						title: '功能完善中',
						position: 'center',
						icon: 'none'
					});
			}
		},
		editName() {
			switch (this.chatItem.type) {
				case 'group':
					{
						uni.navigateTo({
							url: `/pages/groupDetail/groupDetail?id=${this.chatItem.data?.groupId}`
						});
					}
					break;
				case 'favorite':
					{
						this.placeholder = '输入收藏名';
						this.title = '备注收藏点名称';
						this.showDialog = true;
					}
					break;
				case 'person':
					{
						this.placeholder = '输入好友备注';
						this.title = '修改好友名称';
						this.showDialog = true;
					}
					break;
				default: {
					this.placeholder = '输入好友备注';
					this.title = '修改好友名称';
				}
			}
		},
		//删除会话
		delItem() {
			switch (this.chatItem.type) {
				case 'group':
					{
					}
					break;
				case 'favorite':
					{
					}
					break;
				case 'person':
					{
					}
					break;
				default: {
				}
			}
		},

		handleTop() {
			switch (this.chatItem.type) {
				case 'group':
					{
					}
					break;
				case 'favorite':
					{
					}
					break;
				case 'person':
					{
					}
					break;
				default: {
				}
			}
		},

		//声音设置
		setSound() {
			this.sound++;
			const soundmanger = new soundManger();
			const sound = this.sound % 3;
			console.log(sound);
			console.log(this.chatItem);
			if (this.chatItem.type === 'favorite') {
				soundmanger.setState(this.chatItem.data.favorite_id, sound);
			} else if (this.chatItem.type === 'group') {
				soundmanger.setState(this.chatItem.data.groupId, sound);
			} else if (this.chatItem.type === 'person') {
				soundmanger.setState(this.chatItem.data.friendUserId, sound);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/* 组件容器：屏宽、固定高度、顶部固定 */
.action-panel {
	width: 750rpx;
	height: 135rpx;
	position: fixed;
	top: 0; /* 改为顶部固定 */
	left: 0;
	right: 0;
	z-index: 200;
	display: flex;
	align-items: flex-end; /* 图标整体靠下对齐 */
	justify-content: space-between;
	padding: 0 30rpx 30rpx; /* 底部内边距20rpx，实现图标离底部20rpx */
	background-color: #fff;
	border-bottom-left-radius: 20rpx; /* 改为底部圆角 */
	border-bottom-right-radius: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); /* 阴影向下 */
	transform-style: preserve-3d;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
	pointer-events: none;
}

/* 隐藏状态：向上翻盖（沿顶部中心轴旋转-90度） */
.panel-hide {
	transform: rotateX(-90deg);
	transform-origin: top center; /* 旋转轴改为顶部中心 */
	opacity: 0;
	pointer-events: none;
}

/* 显示状态：向下翻开（恢复初始位置） */
.panel-show {
	transform: rotateX(0deg);
	transform-origin: top center;
	opacity: 1;
	pointer-events: none;
}

/* 左侧关闭图标 */
.icon-left {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
}
.sound {
	width: 40rpx;
	height: 40rpx;
	border-radius: 20rpx;
	pointer-events: auto;
	.sound-img {
		width: 40rpx;
		height: 40rpx;
	}
}
.topimg {
	width: 30rpx;
	height: 30rpx;
}
/* 中间图标组：横向居中，均匀分布 */
.middle-icons {
	display: flex;
	align-items: center;
	gap: 60rpx;
	flex: 1;
	justify-content: center;
	pointer-events: auto;
}

.middle-icons uni-icons {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
}

/* 右侧更多图标 */
.icon-right {
	position: relative;
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-right: 50rpx;
	pointer-events: auto;
}
</style>
